@import "../utils/_color";

#mine-wrapper {
  .mine {
    transform: scale(1);
    text-align: center;
    background-color: $light-blue;
    background-repeat: no-repeat;
    background-position: 50% 140px;
    background-size: 100px 100px;

    &:first-child {
      margin-left: 50px;
    }

    &.fe-focus {
      transform: scale(1.05);
      transform-origin: 50% 100%;
      border: 5px solid #279b63;

      &.first {
        transform-origin: 0 100%;
      }

      &.last {
        transform-origin: 100% 100%;
      }
    }

    &-title {
      font-size: 32px;
      font-weight: bold;
      line-height: 35px;
      margin-top: 290px;
      backface-visibility: hidden;
    }

    &-1 {
      background-image: image-url("mine/1.png");

      &.active {
        background-image: image-url("mine/green-1.png");
      }
    }

    &-2 {
      background-image: image-url("mine/2.png");

      &.active {
        background-image: image-url("mine/green-2.png");
      }
    }

    &-3 {
      background-image: image-url("mine/3.png");

      &.active {
        background-image: image-url("mine/green-3.png");
      }
    }

    &-4 {
      background-image: image-url("mine/4.png");

      &.active {
        background-image: image-url("mine/green-4.png");
      }
    }
  }
}
